<template>
  <n-modal
    :show="visible"
    @update:show="$emit('update:visible', $event)"
    preset="dialog"
    :title="title"
    :auto-focus="false"
    :mask-closable="false"
    style="width: 500px;"
  >
    <div class="dangerous-action-confirm">
      <n-alert type="error" :show-icon="true" class="mb-16px">
        <template #header>
          <span class="font-bold">⚠️ 高危操作警告</span>
        </template>
        <div class="text-14px">
          <p class="mb-8px">您即将执行一个不可逆的删除操作！</p>
          <p class="mb-8px">{{ description }}</p>
          <p class="text-red-600 font-bold">此操作无法撤销，请谨慎操作！</p>
        </div>
      </n-alert>

      <!-- 当操作被禁用时显示警告 -->
      <n-alert v-if="disabled" type="warning" :show-icon="true" class="mb-16px">
        <template #header>
          <span class="font-bold">⚠️ 操作被禁止</span>
        </template>
        <div class="text-14px">
          <p>当前无法执行此操作，请先解决所有阻碍因素。</p>
        </div>
      </n-alert>

      <n-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-placement="top"
        class="mt-16px"
      >
        <n-form-item label="管理员密码" path="password" required>
          <n-input
            v-model:value="formData.password"
            type="password"
            placeholder="请输入管理员密码以确认操作"
            show-password-on="click"
            :input-props="{ autocomplete: 'current-password' }"
            :disabled="disabled"
          />
          <template #feedback>
            <span class="text-12px text-gray-500">
              需要输入当前登录管理员的密码进行身份验证
            </span>
          </template>
        </n-form-item>

        <n-form-item path="confirmed" required>
          <n-checkbox v-model:checked="formData.confirmed" :disabled="disabled">
            <span class="text-14px">
              我确认不再需要此数据，并理解此操作不可撤销
            </span>
          </n-checkbox>
        </n-form-item>

        <n-form-item path="doubleConfirmed" required>
          <n-checkbox v-model:checked="formData.doubleConfirmed" :disabled="disabled">
            <span class="text-14px font-bold text-red-600">
              我已充分理解删除的后果，确认执行删除操作
            </span>
          </n-checkbox>
        </n-form-item>
      </n-form>

      <!-- 删除项目信息 -->
      <n-card title="即将删除的数据" size="small" class="mt-16px">
        <n-descriptions :column="1" size="small">
          <n-descriptions-item
            v-for="(value, key) in itemInfo"
            :key="key"
            :label="key"
          >
            <span class="font-mono">{{ value }}</span>
          </n-descriptions-item>
        </n-descriptions>
      </n-card>

      <!-- 风险提示 -->
      <n-card title="删除风险提示" size="small" class="mt-12px">
        <n-space vertical size="small">
          <div v-for="risk in risks" :key="risk" class="flex items-start">
            <icon-park-outline-close-one class="text-red-500 mt-2px mr-8px flex-shrink-0" />
            <span class="text-13px">{{ risk }}</span>
          </div>
        </n-space>
      </n-card>
    </div>

    <template #action>
      <n-space>
        <n-button @click="handleCancel">
          取消
        </n-button>
        <n-button
          type="error"
          :loading="loading"
          :disabled="disabled || !canConfirm"
          @click="handleConfirm"
        >
          <template #icon>
            <icon-park-outline-delete />
          </template>
          确认删除
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'

interface Props {
  visible: boolean
  title: string
  description: string
  itemInfo: Record<string, any>
  risks: string[]
  disabled?: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'confirm', password: string): void
  (e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
})
const emit = defineEmits<Emits>()

// 表单引用
const formRef = ref<FormInst | null>(null)

// 加载状态
const loading = ref(false)

// 表单数据
const formData = ref({
  password: '',
  confirmed: false,
  doubleConfirmed: false
})

// 表单验证规则
const formRules: FormRules = {
  password: [
    {
      required: true,
      message: '请输入管理员密码',
      trigger: ['input', 'blur']
    },
    {
      min: 6,
      message: '密码长度不能少于6位',
      trigger: ['input', 'blur']
    }
  ],
  confirmed: [
    {
      required: true,
      validator: (rule, value) => {
        return value === true
      },
      message: '请勾选确认选项',
      trigger: ['change']
    }
  ],
  doubleConfirmed: [
    {
      required: true,
      validator: (rule, value) => {
        return value === true
      },
      message: '请勾选最终确认选项',
      trigger: ['change']
    }
  ]
}

// 是否可以确认
const canConfirm = computed(() => {
  return formData.value.password.length >= 6 && 
         formData.value.confirmed && 
         formData.value.doubleConfirmed
})

// 监听弹窗显示状态
watch(() => props.visible, (newValue) => {
  if (newValue) {
    // 重置表单
    formData.value = {
      password: '',
      confirmed: false,
      doubleConfirmed: false
    }
    loading.value = false
  }
})

// 处理取消
const handleCancel = () => {
  emit('update:visible', false)
  emit('cancel')
}

// 处理确认
const handleConfirm = async () => {
  try {
    await formRef.value?.validate()
    loading.value = true
    emit('confirm', formData.value.password)
  } catch (error) {
    console.warn('表单验证失败:', error)
  }
}

// 设置加载状态
const setLoading = (value: boolean) => {
  loading.value = value
}

// 暴露方法给父组件
defineExpose({
  setLoading
})
</script>

<style scoped>
.dangerous-action-confirm {
  max-height: 70vh;
  overflow-y: auto;
}

.n-descriptions :deep(.n-descriptions-item-label) {
  font-weight: 600;
  color: #333;
}

.n-descriptions :deep(.n-descriptions-item-content) {
  color: #666;
}

.font-mono {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
</style>
